{% load socialaccount %}
{% get_providers as socialaccount_providers %}

{% for provider in socialaccount_providers %}
<li>
    <a title="使用 {{ provider.name }} 登录" 
       class="socialaccount_provider {{ provider.id }}"
       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
        {{ provider.name }}
    </a>
</li>
{% endfor %}

<style>
    .socialaccount_providers {
        list-style: none;
        padding: 0;
        margin: 20px 0;
    }
    
    .socialaccount_provider {
        display: inline-block;
        padding: 10px 20px;
        margin: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
        transition: all 0.3s ease;
    }
    
    .socialaccount_provider:hover {
        background-color: #f5f5f5;
        text-decoration: none;
    }
    
    .socialaccount_provider.github {
        background-color: #24292e;
        color: white;
        border-color: #24292e;
    }
    
    .socialaccount_provider.github:hover {
        background-color: #1b1f23;
    }
    
    .fab {
        margin-right: 8px;
    }
    </style>